@import "mixin_helpers";
@import "variables";

@mixin label($color) {
  @include std-bg($color, darken($color, 10));
  @include box-shadow(0 1px 0 #f7f7f7, inset 0 1px 1px darken($color, 4));
}

@mixin badge($color) {
  @include std-bg($color, darken($color, 5));
  @include box-shadow(0 0 0 1px darken($color, 20));
}

%badge-extend {
  display: inline-block;
  padding: 0 4px;
  border-radius: 10px;
  height: 14px;
  min-width: 14px;
  line-height: 14px;
  @include box-sizing(border-box);
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  @include box-shadow(0 0 0 1px rgba(0,0,0,.6));
  @include text-shadow(0 -1px 0 rgba(0,0,0,.3));
  color: #fff;
}

.label, .badge {
  font-weight: 600;
}

@each $pair in $badge-colors {
  .label-#{nth($pair, 1)} {
    @include label(nth($pair, 2));
  }
}

@each $pair in $badge-colors {
  .badge-#{nth($pair, 1)} {
    @include badge(nth($pair, 2));
    @extend %badge-extend;
  }
}

.badge-flat {
  @include text-shadow(none);
}

